<!--
 * @Descripttion:
 * @version:
 * @Author: zhuzm@linkstec.com
 * @Date: 2023-01-10 16:24:21
 * @LastEditors: sueRimn
 * @LastEditTime: 2023-02-13 15:21:12
-->
<template>
  <div class="list-item">
    <div class="title">
      <div class="title-wrap">
        <i class="section-title-line"></i>
        <div class="section-title-text">{{ title }}</div>
        <div class="section-subtitle-text">共查询到<span class="count">{{ count }}</span>条信息</div>
      </div>
      <div class="more" @click="toMore">
        <span>更多</span>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: 'TitleSearch',
  components: {},
  props: {
    title: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: 0
    }
  },
  // 定义属性
  data () {
   return {

    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  methods: {
    toMore () {
      this.$emit('toMore');
    }
  }
};
</script>

<style lang="scss" scoped>
.list-item{
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  padding: 0 20px;
  margin-bottom: 20px;
  .title{
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #D4D8E5;
    .title-wrap{
      display: flex;
      align-items: center;
      .section-title-line{
        width: 6px;
        height: 19px;
        background-color: #2468F2;
        border-radius: 4px;
        margin-right: 12px;
      }
      .section-title-text{
        font-weight: 700;
        font-size: 20px;
        color: #333333;
        margin-right: 24px;
      }
      .section-subtitle-text{
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        .count{
          color: #2468F2;
        }
      }
    }
    .more{
      font-weight: 400;
      font-size: 14px;
      color: #9B9494;
      cursor: pointer;
    }
  }
}
</style>
